<template>
  <el-button
    @click="setStartPosition"
    :disabled="startPosition"
  >设置成开始位置</el-button>
  <el-button
    @click="setEndPosition"
    :disabled="endPosition"
  >设置成结束位置</el-button>
  <el-button
    @click="getRoute"
    :disabled="!startPosition || !endPosition"
  >获取路径</el-button>
  <el-button @click="reselect">重新选择</el-button>
  <div style="text-align: left;margin: 8px;">
    <el-tag
      style="text-align: left"
      type="danger"
    >
      指定空白区域为开始位置和结束位置
    </el-tag>
  </div>
  <canvas
    style="width:600px;height: 600px; "
    id="board"
  ></canvas>
  <br />
  <!-- <div style="margin-top: 20;">
    {{ chooseNode }}
  </div> -->

</template>

<script setup>
// import Montage from "montage.js";
import Montage from "../../../../package/src/package/index.js";

import { onMounted, ref } from "vue";
import { baseCoordinate, findRoute } from "./data-example.js";

/**
 * 获取路径
 */
let pathRoutes = ref([]);
const getRoute = () => {
  let { result, usedRouteMap, unUsedRoutes } = findRoute(
    startPosition.value,
    endPosition.value
  );
  let routeIds = result;
  if (!routeIds.length) alert("死路一条");
  console.log("routeIds", routeIds);

  Object.keys(usedRouteMap).forEach((id) => {
    let node = Draw.getNode(id);
    node.fillType = "fill";
    node.fillColor = "yellow";
    pathRoutes.value.push(id);
  });
  for (let u of unUsedRoutes) {
    let node = Draw.getNode(u.id);
    node.fillType = "fill";
    node.fillColor = "yellow";
    pathRoutes.value.push(u.id);
  }

  for (let id of routeIds) {
    let node = Draw.getNode(id);
    node.fillType = "fill";
    node.fillColor = "green";
  }
  Draw.reload();
};

/**
 * 设置开始位置
 */
const startPosition = ref();
const setStartPosition = () => {
  startPosition.value = chooseNode.value;
  startPosition.value.fillColor = "green";
  startPosition.value.fillType = "fill";
  Draw.reload();

  chooseNode.value = null;
};

/**
 * 设置结束位置
 */
const endPosition = ref();
const setEndPosition = () => {
  endPosition.value = chooseNode.value;
  endPosition.value.fillColor = "blue";
  endPosition.value.fillType = "fill";
  Draw.reload();

  chooseNode.value = null;
};

/**
 * 重新选择
 */
const reselect = () => {
  if (startPosition.value) {
    startPosition.value.fillColor = "#1E90FF";
    startPosition.value.fillType = "stroke";
  }
  if (endPosition.value) {
    endPosition.value.fillColor = "#1E90FF";
    endPosition.value.fillType = "stroke";
  }
  for (let id of pathRoutes.value) {
    let node = Draw.getNode(id);
    node.fillType = "stroke";
    node.fillColor = "#1E90FF";
  }
  Draw.reload();
  startPosition.value = null;
  endPosition.value = null;
};

/**
 * 点击图案的回调
 */
const chooseNode = ref();
const clickNode = (node) => {
  if (!node.id) {
    return;
  }
  console.log("点击的节点", node);

  if (chooseNode.value) {
    chooseNode.value.fillColor = "#1E90FF";
    chooseNode.value.fillType = "stroke";
  }

  chooseNode.value = node;
  node.fillColor = "rgba(200, 0, 0, 0.5)";
  chooseNode.value.fillType = "fill";
  Draw.reload();
};
let Draw;
onMounted(() => {
  Draw = new Montage(
    { width: 600, height: 600 },
    document.getElementById("board"),
    clickNode
  );
  console.log("mounted");
  window.Draw = Draw;
  initNodes();
});

/**
 * 添加节点
 */
const initNodes = () => {
  console.log(1);
  baseCoordinate.forEach((node) => {
    Draw.addNode(node);
  });
};
</script>

<style>
</style>